<template>
  <div  style="width: 80%" auto>
    <div class="analyse-wap1">
      <el-page-header @back="goBack" :content="`反馈工单（ID:${feedbackContents.cmsFeedback ? feedbackContents.cmsFeedback.feedbackId : ''}）`">
      </el-page-header>
    </div>

    <el-card class="box-card" v-if="feedbackContents.cmsFeedback">
      <div class="chat-title" flex flex-c flex-b>
        <p flex flex-c fz-14>
          <span>创建时间：{{feedbackContents.cmsFeedback.createTime}}</span>
          <span>状态： {{feedbackContents.cmsFeedback.type == 1 ? '待回复' : '已回复'}}</span>
          <span>对象：{{feedbackContents.cmsFeedback.userName}} ( {{feedbackContents.cmsFeedback.userId}} )</span>
        </p>

        <div  class="chat-btn" flex flex-c flex-b>
          <el-tooltip content="回复反馈" placement="bottom">
            <span class="el-icon-chat-line-round"
                  fz-16
                  cur
                  @click="dialogFormVisible = true"
                  >

            </span>
          </el-tooltip>



        </div>

      </div>

      <div class="chat-record" v-show="feedbackContents.cmsUserCommentList.length > 0">
        <dl flex v-for="(item,index) in feedbackContents.cmsUserCommentList" :key="index" :class="{'from-me':item.userId == feedbackContents.cmsFeedback.userId}">
          <dt>
            <el-avatar shape="square" size="medium" fit="cover" :src="fileUrl + item.userAvatar">

            </el-avatar>
          </dt>
          <dd>
            <p flex flex-c flex-b>
              <span class="margin-left: 20px;">{{item.userName}}</span>
              {{item.createTime}}
            </p>
            <div class="chat-cont" >
              {{item.content}}
            </div>

          </dd>
        </dl>
      </div>

    </el-card>



    <el-dialog title="回复工单"
               :visible.sync="dialogFormVisible"

               class="show"

    >
      <el-input
          type="textarea"
          placeholder="请输入回复内容"
          v-model="textarea"
          maxlength="255"
          show-word-limit
          :required="true"
          class="chara-form"
      >
      </el-input>
      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="cmsUserComment">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import $http from "@/api/feedback/feedback"
import img from '@/assets/aaaa.gif'
export default {
  name: "ChatView",
  data() {
    return {
      fileUrl: this.$url.fileUrl,
      url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F6a%2F51%2F24%2F6a512471795e0824472d6c85cf22bdb2.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638627584&t=e1b7bf0b3bc1315b72f5a3421077d905',
      img: img,
      dialogFormVisible: false,
      textarea: '',
      id: '',
      feedbackContents: {}
    }
  },
  mounted() {
    this.id = this.$route.params.id;
    this.cmsFeedbackDetailed();
  },

  methods: {
    goBack() {
      this.$router.go(-1)
    },
    /**
     * 获取详情
     */
    cmsFeedbackDetailed() {
      let that = this;
      let data = {
        id: this.id
      }
      $http.cmsFeedbackDetailed(data).then(res => {
        console.log(res);
        that.feedbackContents = res.data;
      })
    },
    /**
     * 提交反馈信息
     */
    cmsUserComment() {
      let that = this;
      let data = {
          "userId": that.feedbackContents.cmsFeedback.userId,
          "bizId": that.feedbackContents.cmsFeedback.feedbackId,
          "bizType": 1,
          "parentId": 1,
          "content": this.textarea
      }
      $http.cmsUserComment(data).then(res => {
        console.log("提交反馈信息",res);
        this.dialogFormVisible = false;
        this.cmsFeedbackDetailed();
      })
    }


  }

}
</script>

<style scoped>
.box-card{
  margin-top: 2%;
  max-height: 70vh;

}
.chat-record{
  height: calc(70vh - 50px);
  overflow-y: auto;
}
dl{
  color: var(--nav-color);
  font-size: var(--content);
  margin-top: 2%;
}
dt{
  margin-right: 1%;

}
dd p{
  margin-bottom: 1%;
}
.chat-cont{
  padding: 5px 11px;
  border: 1px solid #e1e0e4;
  border-radius: 6px;
  max-width: 500px;
  overflow-wrap: break-word;
  line-height: 20px;
  color: var(--color-black);
  font-size: 14px;
  min-height: 30px;

}

dl.from-me{
  justify-content: flex-start;

}
dl.from-me dt{
  margin: 0 0 0 1%;
}
dl.from-me p, dl.from-me {
  flex-direction: row-reverse;
}
dl.from-me .chat-cont{
  background: #02d4b1;
  color: #fff;
  border:none;
}
.chat-title{
  height: 50px;
  border-bottom: 1px solid #e6e5e6;
}
.chat-title p{
  color: var(--color-black);
}
.chat-btn{
  flex: 0 0 5%;
}
.chat-title{

}
.chat-title p{
  flex: 1;
}
.chat-title p span{
  margin-right: 2%;
}
.chat-btn >>> .el-tooltip{
  font-size: 22px;

}
</style>
